<div class="container-fluid ">
    <div class="row">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="exampleInputAccount1" class="col-sm-1">收费站</label>
                <div class="col-sm-2">
                    <select class="form-control">
                            <option value="">全部</option>
                            <option value="1">东台收费站</option>
                            <option value="2">收费站</option>
                            <option value="3">收费站</option>
                        </select>
                </div>
                <label for="exampleInputAccount1" class="col-sm-1">车道号</label>
                <div class="col-sm-2">
                    <select class="form-control">
                            <option value="">1</option>
                            <option value="1">2</option>
                            <option value="2">3</option>
                            <option value="3">4</option>
                        </select>
                </div>
                <label for="exampleInputAccount1" class="col-sm-1">考核人员</label>
                <div class="col-sm-2">
                    <!-- 使用图片 -->
                    <a href="../../images/img4.jpg" class="lightbox-toggle" data-toggle="lightbox" data-group="image-group-1"><img src="../../images/img4.jpg" class="img-rounded" alt="" width="50px"></a>
                    <label id="checkedPerson">0518 盛兴峰</label>
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-primary " type="button" data-toggle="modal" data-target="#changePersonWin">更改考核人员</button>
                </div>
            </div>
        </form>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <ul class="nav nav-secondary">
                <li class="active"><a data-tab href="#tabContent1">收费亭</a></li>
                <li><a data-tab href="#tabContent2">车道</a></li>
                <li><a data-tab href="#tabContent3">广场</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tabContent1">
                    <img data-toggle="lightbox" src="../../images/img4.jpg" data-caption="小图看大图" alt="" width="500">
                </div>
                <div class="tab-pane" id="tabContent2">
                    <img data-toggle="lightbox" src="../../images/bg.jpg" data-caption="小图看大图" alt="" width="500">
                </div>
                <div class="tab-pane" id="tabContent3">
                    <img data-toggle="lightbox" src="../../images/img4.jpg" data-caption="小图看大图" alt="" width="500">
                </div>
            </div>
            <div class="row">
                <div class="cards cards-borderless col-sm-11">
                    <div class="col-md-4 col-sm-6 col-lg-3">
                        <a href="#" style="color:red;"><i class="icon icon-remove-circle"></i> 删除</a>
                        <a class="card lightbox-toggle" href="../../images/img4.jpg">
                            <img src="../../images/img4.jpg" alt="">
                            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
                        </a>
                    </div>
                    <div class="col-md-4 col-sm-6 col-lg-3">
                        <a href="#" style="color:red;"><i class="icon icon-remove-circle"></i> 删除</a>
                        <a class="card lightbox-toggle" href="../../images/img4.jpg">
                            <img src="../../images/img4.jpg" alt="">
                            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
                        </a>
                    </div>
                    <div class="col-md-4 col-sm-6 col-lg-3">
                        <a href="#" style="color:red;"><i class="icon icon-remove-circle"></i> 删除</a>
                        <a class="card lightbox-toggle" href="../../images/img4.jpg">
                            <img src="../../images/img4.jpg" alt="">
                            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
                        </a>
                    </div>
                    <div class="col-md-4 col-sm-6 col-lg-3">
                        <a href="#" style="color:red;"><i class="icon icon-remove-circle"></i> 删除</a>
                        <a class="card lightbox-toggle" href="../../images/img4.jpg">
                            <img src="../../images/img4.jpg" alt="">
                            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-1">
                    <br>
                    <button class="btn btn-primary" type="button">清空</button>
                    <br>
                    <br>
                    <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#scoreWin">评分</button>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="datatable" data-checkable="true" data-sortable="true"></div>
            <div class="col-sm-2">
                <button class="btn btn-primary" type="button" onclick="submitResult()">直接提交</button>
            </div>
            <div class="col-sm-2">
                <button class="btn btn-primary" type="button" onclick="showPre()">预览提交</button>
            </div>
            <div class="col-sm-2">
                <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#validSubmitWin">申请无效</button>
            </div>
            <div class="col-sm-2">
                <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#refuseApplyWin">拒绝申请</button>
            </div>
            <div class="col-sm-2">
                <button class="btn btn-primary" type="button" onclick="agreeApply()">同意申请</button>
            </div>
        </div>
    </div>
</div>
<!-- 对话框HTML -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">添加常量</h4>
            </div>
            <div class="modal-body">
                <link rel="import" href="/view/constant/add.html?__inline">
            </div>
        </div>
    </div>
</div>
<!-- 对话框HTML -->
<div class="modal fade" id="changePersonWin">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">更改用户</h4>
            </div>
            <div class="modal-body">
                <ul class="tree" data-ride="tree">
                    <li>
                        <a href="#" onclick="changePerson('001 张三')">001 张三 <a href="../../images/img4.jpg" class="lightbox-toggle" data-toggle="lightbox" data-group="image-group-1"><img src="../../images/img4.jpg" class="img-rounded" alt="" width="50px"></a></a>
                    </li>
                    <li><a href="#" onclick="changePerson('002 李四')">002 李四 <a href="../../images/img4.jpg" class="lightbox-toggle" data-toggle="lightbox" data-group="image-group-1"><img src="../../images/img4.jpg" class="img-rounded" alt="" width="50px"></a></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 对话框HTML -->
<div class="modal fade" id="validSubmitWin">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">无效申请</h4>
            </div>
            <div class="modal-body">
                <form  class="form-horizontal">
                    <label for="exampleInputAccount1" class="col-sm-2">无效原因</label>
                    <div class="form-group">
                        <input class="col-sm-3" type="text" id="valid-reason" class="form-control" placeholder="原因">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveValidReason()">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 对话框HTML -->
<div class="modal fade" id="refuseApplyWin">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">拒绝申请</h4>
            </div>
            <div class="modal-body">
                <form  class="form-horizontal">
                    <label for="exampleInputAccount1" class="col-sm-2">拒绝原因</label>
                    <div class="form-group">
                        <input class="col-sm-3" type="text" id="valid-reason" class="form-control" placeholder="原因">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="refuseApply()">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 对话框HTML -->
<div class="modal fade" id="scoreWin">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">评分</h4>
            </div>
            <div class="modal-body">
                <ul class="tree" data-ride="tree">
                    <li>
                        <a href="#" onclick="score('10')">仪容仪表</a>
                    </li>
                    <li><a href="#" onclick="score('20')">礼貌用语</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('a.lightbox-toggle').lightbox();
        // 仅选择日期
        $("#start-time").datetimepicker({
            language: "zh-CN",
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: "yyyy-mm-dd"
        });
        // 仅选择日期
        $("#end-time").datetimepicker({
            language: "zh-CN",
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: "yyyy-mm-dd"
        });
        // 使用data参数更新数据：
        $('.datatable').datatable({
            checkable: false,
            sortable: false,
            data: {
                cols: [{
                    width: 30,
                    text: '序号',
                    type: 'number',
                    flex: true,
                    colClass: 'text-center'
                }, {
                    width: 200,
                    text: '评分记录',
                    type: 'string',
                    flex: true,
                    sort: 'down'
                }, {
                    width: 30,
                    text: '分数',
                    type: 'string',
                    flex: true,
                    colClass: ''
                }, {
                    width: 100,
                    text: '操作',
                    type: 'string',
                    flex: true,
                    colClass: ''
                }],
                rows: [{
                        checked: false,
                        data: [1, '服务设施维修及时，小修及时修复', '10', '<a href="#" data-toggle="modal" data-target="#myModal"><i class="icon icon-edit"></i>修改 </a><a href="#"><i class="icon icon-remove-circle"></i>删除</a>']
                    }, {
                        checked: false,
                        data: [2, '服务区垃圾房应封闭，房内垃圾入袋，地面无污水', '20', '<a href="#" data-toggle="modal" data-target="#myModal"><i class="icon icon-edit"></i>修改 </a><a href="#"><i class="icon icon-remove-circle"></i>删除</a>']
                    },
                    // 更多数据
                ]
            }
        });
    });

        function showPre(id){
            // $('#myModal').modal({name:"dd"});
            changePage("/view/mytask/taskDetail.html");
        }

        function saveValidReason(){
            alert("提交成功！");
            $('#validSubmitWin').modal('toggle');
        }
        function changePerson(id){
            $('#checkedPerson').html(id);
            $('#changePersonWin').modal('toggle');
        }

        function score(score){
            alert("扣分："+score);
            $('#scoreWin').modal('toggle');
        }

        function refuseApply(){
            alert("拒绝申请");
            $('#refuseApplyWin').modal('toggle');
        }

        function agreeApply(){
            alert("同意申请");
        }
    </script>
